<template>
  <div class="photolist">
    <van-tabs animated v-model="activeName" @click="onClick">
      <van-tab
        v-for="(item, index) in type"
        :key="index"
        :title="item"
        :name="item"
      >
        <div
          class="imgBox"
          v-for="(img, i) in imgs"
          :key="img.avatar + item + i"
        >
          <a href="#/home/photoInfo"><img v-lazy="img.avatar" alt="" /></a>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getCategory } from "@/api/photo.js"
export default {
  data() {
    return {
      cates: [],
      type: [],
      imgs: [],
      activeName: "动漫"
    }
  },
  created() {
    this.search()
    // console.log(res)
    // console.log(this.cates)
    // console.log(this.type)
  },
  methods: {
    async search() {
      this.imgs = []
      const res = await getCategory(this.activeName)
      if (res.data.code === 1) {
        this.cates = res.data.data
        this.type = res.data.type
        // this.type.unshift("全部")
        this.imgs = res.data.data
      }
    },
    onClick(val) {
      // console.log(val)
      this.activeName = val
      this.search()
    }
  }
}
</script>
<style lang="scss" >
.photolist {
  .van-tabs__wrap {
    z-index: 99;
    position: fixed;
    top: 46px;
    width: 100%;
  }
  .van-tabs__content {
    margin-top: 90px;
  }
  .imgBox img {
    width: 100%;
    height: 100%;
  }
}
</style>